<script lang="ts" setup>
const formModel = reactive({
  user_no: '',
  pwd: '',
})
const userStore = useUserStore()

const dialogVisible = computed(() => userStore.loginVisible)
const allowCloseLogin = storeToRefs(userStore).allowCloseLogin
function handleClose() {
  userStore.setLoginVisible(false)
}
async function login() {
  if (!formModel.user_no || !formModel.pwd) {
    return ElMessage.error('请输入账号和密码')
  }
  userStore.accountLogin(formModel).then(() => {
    if (allowCloseLogin.value === false) {
      userStore.setAllowCloseLogin(true)
      window.location?.reload?.()
    }
  })
}
const loginType = ref<'account' | 'wx'>('account')
const options = ref([
  {
    label: '账号登录',
    value: 'account',
  },
  {
    label: '微信登录',
    value: 'wx',
  },
])
function goBack() {
  userStore.setLoginVisible(false)
  userStore.setAllowCloseLogin(true)
  const router = useRouter()
  router.go(-1)
}
function toWxlogin() {
  let currentHref = window.location.href
  if (currentHref?.includes('www') === false) {
    currentHref = `${window.location.protocol}//www.${window.location.host}${window.location.pathname}`
  }
  window.location.href = `https://open.weixin.qq.com/connect/qrconnect?appid=wx20f0e24c8f73a8d7&redirect_uri=${encodeURIComponent(currentHref)}&response_type=code&scope=snsapi_login&state=#wechat_redirect`
}
function onchange(val) {
  if (val === 'wx') {
    toWxlogin()
  }
}
// 微信登录地址
// https://open.weixin.qq.com/connect/qrconnect?appid=wx20f0e24c8f73a8d7&redirect_uri=https://www.bxjkw.cn/&response_type=code&scope=snsapi_login&state=#wechat_redirect
</script>

<template>
  <div>
    <el-dialog
      :model-value="dialogVisible"
      title="登录"
      width="350"
      :close-on-click-modal="allowCloseLogin"
      :close-on-press-escape="allowCloseLogin"
      :show-close="allowCloseLogin"
      :before-close="handleClose"
    >
      <div class="pb-20px text-center">
        <el-segmented v-model="loginType" :options="options" @change="onchange" />
      </div>
      <el-form v-if="loginType === 'account'" :model="formModel" label-width="40px">
        <el-form-item label="账号">
          <el-input v-model="formModel.user_no" placeholder="请输入账号" />
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="formModel.pwd" type="password" placeholder="请输入密码" show-password />
        </el-form-item>
        <div class="w-full text-center">
          <el-button type="primary" @click.stop.prevent="login">
            登录
          </el-button>
          <!-- <el-button class="ml-10px" @click.stop.prevent="goBack">
            返回
          </el-button> -->
        </div>
      </el-form>
      <!-- <div v-else class="login-form scan-login">
        <WxLogin />
        <div class="tips">
          使用微信扫码登录
        </div>
      </div> -->
    </el-dialog>
  </div>
</template>

<style>
    .login-form.scan-login {
  display: none;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.login-form .qrcode {
  width: 295px;
  height: 295px;
  background-color: #e2e2e2;
}

.login-form .tips {
  margin-top: 33px;
  font-size: 16px;
}
</style>
